<!--
 * @Description: 课程详情页 -- handpick
 * @Author: your name
 * @Date: 2023-12-11
 * @LastEditTime: 2023-12-11
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="layout">
      <div class="handpick heart_w">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>课程</el-breadcrumb-item>
          <el-breadcrumb-item>{{ boxTitle }}</el-breadcrumb-item>
        </el-breadcrumb>

        <div v-for="item_t in goodsInfoList" :key="item_t.id">
          <div class="container_content" v-if="item_t.position == nowposition">
            <div class="container_content_imagelist">
              <el-carousel
                trigger="click"
                height="336px"
                indicator-position="outside"
              >
                <el-carousel-item>
                  <el-image :src="item_t.image"></el-image>
                </el-carousel-item>
              </el-carousel>
            </div>

            <div class="container_content_message">
              <h3>{{ item_t.title_h }}</h3>
              <div class="message_dis">
                <h3>课程简介：</h3>
                <p>
                  {{ item_t.describe }}
                </p>
              </div>
              <!-- 科目 -->
              <div class="chosebox">
                <h4>选择科目:</h4>
                <div class="choswitem">
                  <span
                    :class="{ active: com == i }"
                    v-for="(item, i) in item_t.titleArr"
                    :key="i"
                    @click="spanActive(i)"
                  >
                    {{ item.title_t }}
                  </span>
                </div>
              </div>
              <!-- 价格 -->
              <div class="content_message_validity">
                <div class="message_validity_item">
                  <!-- 课程永久有效哦！ -->
                </div>
                <div class="content_message_priceBox">
                  <div class="message_priceBox_item">
                    <div>
                      <span>价格：</span>
                    </div>
                    <div>
                      <span class="free">￥ {{ item_t.price }}</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="handle">
                <div @click="CollectionAdd">
                  <i class="iconfont icon-shoucang" v-if="coll_val"></i>
                  <i
                    class="iconfont icon-shoucang2"
                    style="color: #ff8140"
                    v-else
                  >
                  </i>
                  收藏
                </div>
                <div>
                  <el-button type="primary" round class="btns_t">
                    在线咨询
                  </el-button>
                  <el-button type="primary" round @click="freeLearning(item_t)">
                    立即购买
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container heart_w">
      <div class="container_detils">
        <div class="detils_con">
          <!-- tabs栏 -->
          <div class="container_selectTap">
            <div class="selectTap_item">
              <div class="selectTap_tip" :style="{ left: select_val + 'px' }">
                <img
                  src="http://zhishifufei.crmeb.net/pc/images/select.png"
                  alt=""
                />
              </div>
              <div
                :class="{ selectTap: true, selectEd: rankId == index }"
                v-for="(item, index) in tabsList"
                :key="item.tid"
                @click="tabsTitles(index, item)"
              >
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>

          <div class="container_content_detils">
            <!-- 1. 详情 -->
            <div class="detils_content" v-if="baseId_img == '详情'">
              <p>
                <!-- <img
                  src="http://cremb-zsff.oss-cn-beijing.aliyuncs.com/cb51d202103301112066634.jpg"
                /> -->
                {{ goodsInfoList[com]?.content }}
              </p>
            </div>

            <!-- 2. 目录 -->
            <div class="course_catalogue" v-if="baseId_img == '目录'">
              <el-collapse v-model="activeNames">
                <el-collapse-item
                  :title="item.name"
                  :name="index + 1"
                  v-for="(item, index) in curriculumList"
                  :key="item.id"
                >
                  <div>
                    <div
                      class="second_level"
                      v-for="item_list in item.list"
                      :key="item_list.id"
                      @click="secondLevel(item_list, item)"
                    >
                      <div class="LevelItem">
                        <div class="section-info-wrapper">
                          <p class="section_title" :title="item_list.name">
                            {{ item_list.name }}
                          </p>
                        </div>
                        <i
                          class="el-icon-arrow-down"
                          v-if="item_list.show_child"
                        ></i>
                        <i class="el-icon-arrow-right" v-else></i>
                      </div>

                      <div
                        class="catalogue_item_wra"
                        v-show="item_list.show_child"
                        v-for="itemLevel3 in item_list.list"
                        :key="itemLevel3.id"
                      >
                        <div class="catalogue_item_child">
                          <div class="left_catalogue">
                            <div>
                              <img
                                src="http://zhishifufei.crmeb.net/pc/images/course3.png"
                                alt="视频"
                              />
                            </div>
                            <div>
                              <span>{{ itemLevel3.name }}</span>
                            </div>
                          </div>
                          <div class="right_type">
                            <!-- <img
                              src="http://zhishifufei.crmeb.net/pc/images/lock2.png"
                              alt="开锁"
                            /> -->
                            <img
                              src="	http://zhishifufei.crmeb.net/pc/images/lock1.png"
                              alt="关锁"
                            />

                            <el-button type="warning" size="small" round>
                              免费
                            </el-button>
                          </div>
                        </div>
                        <!-- <div class="catalogue_item_progress">
                          <span>学习进度：</span>
                          <div class="label_item">
                            {{ true ? '未学习' : '' }}
                            <div class="progress">
                              <el-progress :percentage="50"></el-progress>
                            </div>
                          </div>
                        </div> -->
                      </div>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>

            <!-- 3. 套餐 -->
            <div class="package_course" v-if="baseId_img == '套餐'">
              <a href="#" @click="handpick_ck" v-for="item in 2" :key="item">
                <el-image
                  src="http://cremb-zsff.oss-cn-beijing.aliyuncs.com/f9a0e202105251209381600.jpg"
                >
                </el-image>
                <img
                  src="http://zhishifufei.crmeb.net/pc/images/course3.png"
                  alt=""
                  class="el_img2"
                />

                <div>
                  <div class="title">
                    初入职场老师教你10个常见的面试问题，助你节节高升
                  </div>
                  <div class="browse-money">
                    <div>
                      <el-tag>解题技巧</el-tag>
                    </div>
                  </div>
                  <div class="label-count">
                    <div>781人已学</div>
                  </div>
                </div>
              </a>
            </div>

            <!-- 4. 练习 -->
            <div class="problem" v-if="baseId_img == '练习'">
              <ul class="list">
                <li v-for="item_li in 3" :key="item_li">
                  <div class="title">
                    2021年成人高等教育自学考试全国统考&lt;一卷&gt;真题
                  </div>
                  <el-progress :percentage="50"></el-progress>
                  <div class="wrap">
                    <div>146人已答题</div>
                    <button>开始答题</button>
                  </div>
                </li>
              </ul>
            </div>

            <!-- 5. 考试 -->
            <div class="question" v-if="baseId_img == '考试'">
              <ul class="list_question">
                <li>
                  <a href="#">
                    <el-image
                      src="http://cremb-zsff.oss-cn-beijing.aliyuncs.com/3bec3202105251138365067.jpg"
                    ></el-image>
                    <div class="title">
                      初入职场老师教你10个常见的面试问题，助你节节高升
                    </div>
                    <div class="group">
                      <p>共9题</p>
                      <el-button type="primary" icon="el-icon-edit">
                        答题
                      </el-button>
                    </div>
                  </a>
                </li>
              </ul>
            </div>

            <!-- 6. 评论 -->
            <div class="evaluate" v-if="baseId_img == '评论'">
              <div class="submit_evaluate">
                <el-rate v-model="value" show-text text-color="#aaaaaa">
                </el-rate>
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item>
                    <el-input
                      type="textarea"
                      v-model="form.desc"
                      :rows="5"
                      placeholder="课程满足你的期待吗？说说你的想法，分享给想学习得他们吧~"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <div class="submit_evaluate_handle">
                  <span>
                    <el-upload
                      class="upload-demo"
                      action="#"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      list-type="picture"
                      multiple
                      :limit="6"
                      :on-exceed="handleExceed"
                      :file-list="fileList"
                    >
                      <el-popover
                        placement="bottom"
                        title="图片上传（最多6张）"
                        width="200"
                        trigger="click"
                      >
                        <span> 12321321 </span>
                        <el-button type="text" slot="reference">
                          <i class="el-icon-upload"></i>上传图片
                        </el-button>
                      </el-popover>
                    </el-upload>
                  </span>
                  <el-button type="primary">发表评论</el-button>
                </div>
              </div>
              <div class="user_evaluate">
                <div class="total_score">
                  <span>课程评分：</span>
                  <span>5</span>
                  <span>分</span>
                </div>

                <div
                  class="user_list_item"
                  v-for="item_list in 3"
                  :key="item_list"
                >
                  <div class="item_user">
                    <div>
                      <el-avatar
                        size="size"
                        src="http://zhishifufei.crmeb.net/system/images/user_log.jpg"
                      ></el-avatar>
                      <span>1******8866</span>
                      <el-rate v-model="value" disabled></el-rate>
                    </div>
                    <div>
                      <span>2023-07-10 16:27</span>
                    </div>
                  </div>
                  <div class="item_value">2</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 推荐课程 -->
        <div class="detils_propaganda">
          <div class="propaganda_recommend">
            <div class="recommend_more">
              <div>相关课程推荐</div>
              <div>更多<i class="el-icon-arrow-right"></i></div>
            </div>

            <div class="propaganda_con">
              <div>
                <a
                  href="javascript:void(0);"
                  @click="handpick_ck"
                  v-for="item_li in courseRec"
                  :key="item_li.id"
                >
                  <el-image :src="item_li.image"></el-image>
                  <div>
                    <div class="title">{{ item_li.title }}</div>
                    <div class="browse-money"></div>
                    <div class="label-count">
                      <div>{{ item_li.buy_nums }}人已学</div>
                      <div class="money">
                        ￥
                        <span>{{ item_li.price }}</span>
                      </div>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  addComboCollection,
  getComboInfo,
  getComboChapt,
  getListByLike
} from '@/api/handpick.js'
export default {
  name: 'handpick',
  data() {
    return {
      rankId: 0,
      boxTitle: '',
      baseId_img: '详情',
      value: 5,
      LevelVal: false,
      activeNames: [],
      fileList: [],
      form: {
        desc: ''
      },
      idt: 1,
      com: 0,
      nowposition: 1, //当前
      recommendCourse: [],
      goodsInfoList: [],
      curriculumList: [],
      coll_val: true,
      select_val: 0,
      tabsList: [
        {
          name: '详情',
          tid: 113
        },
        {
          name: '目录',
          tid: 116
        }
        // {
        //   name: '套餐',
        //   tid: 118
        // }
        // {
        //   name: '练习',
        //   tid: 120
        // },
        // {
        //   name: '评论',
        //   tid: 122
        // }
      ],
      courseRec: []
    }
  },
  created() {
    this.idt = this.$route.query.id
    // console.log(this.$route.query)
    this.getListInfo()
  },
  mounted() {},
  methods: {
    async CollectionAdd() {
      this.coll_val = !this.coll_val
      if (this.coll_val == false) {
        await addComboCollection({ id: 1 })
        layer.msg('收藏成功')
      } else {
        await addComboCollection({ id: 1 })
        layer.msg('取消收藏')
      }
    },
    freeLearning(item) {
      console.log(item.id)
      this.$router.push({
        path: '/confirm_order_combo',
        query: { id: item.id, type: 1 }
      })
    },
    secondLevel(itemList, item) {
      if (itemList.show_child == false) {
        item.list.forEach((ele, index) => {
          ele.show_child = false
        })
      }
      itemList.show_child = !itemList.show_child
    },
    spanActive(i) {
      this.com = i
      this.nowposition = this.goodsInfoList[i].position
    },
    getListInfo() {
      let _that = this
      let position_num = 0
      getComboInfo({ id: this.idt }).then(({ data: data }) => {
        this.boxTitle = data.data.box.title
        // this.goodsInfoList = data.data.goods
        let subjectArr = []
        data.data.goods.map((ele, index) => {
          position_num++
          if (ele.position) {
            ele.position = ele.position
          } else {
            ele.position = position_num
          }

          if (ele.title_h) {
            ele.title_h = ele.title_h
          } else {
            ele.title_h = data.data.box.title
          }

          if (ele.titleArr) {
            ele.titleArr = ele.titleArr
          } else {
            let arr = {
              id: position_num,
              title_t: ele.title
            }
            subjectArr.push(arr)
            ele.titleArr = subjectArr
          }

          _that.goodsInfoList.push(ele)
          return ele
        })
      })

      getComboChapt({ id: this.idt }).then(({ data: data }) => {
        data.data.map((ele, index) => {
          ele.list.map((ele_list, i) => {
            if (ele_list.show_child) {
              ele_list.show_child = ele_list.show_child
            } else {
              ele_list.show_child = false
            }
            return ele_list
          })
          _that.curriculumList.push(ele)
          return ele
        })
        console.log(_that.curriculumList)
      })

      // 相关课程推荐
      getListByLike({ combo_id: this.idt }).then(({ data: data }) => {
        _that.courseRec = data.data
      })
    },
    tabsTitles(index, item) {
      this.rankId = index
      this.select_val = 113 * index
      this.baseId_img = item.name
    },
    handpick_ck() {
      // 推荐课程
      this.$router.push({ path: '/handpick_kc', query: { id: 2 } })
      this.refreshT()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/handpick.scss';

.course_catalogue {
  .second_level {
    padding: 16px;
    background: #f5f8fa;
    border-radius: 8px;
    margin-bottom: 16px;
    cursor: pointer;

    .LevelItem {
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 35px;
      padding: 0 12px;
    }
  }
}
</style>
